<template>
  <div>
    <el-card shadow="never">
      <div slot="header">
        <span>考评委员会{{ many ? '批量' : null }}评价</span>
      </div>
      <el-form
        class="mt20"
        :rules="rules"
        :model="form"
        ref="form"
        :disabled="from !== 'committee'"
        label-width="100px"
      >
        <el-form-item class="cancel-width-item" prop="committeeComment">
          <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form.committeeComment"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="3" class="tl-center">
            <el-form-item class="cancel-width-item">
              <el-button @click="handleGetTemplate">获取模板</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="tl-center">
            <el-form-item label="考评等级：" prop="committeeLevel">
              <el-select clearable v-model="form.committeeLevel" placeholder="请选择">
                <el-option
                  :value="item.moralityLevelId"
                  :label="item.moralityLevelName"
                  v-for="(item,index) in levelArr"
                  :key="index"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="考评分数：" prop="committeeScore">
              <el-input v-model="form.committeeScore" placeholder="请输入考评委员会考评分数" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="考评时间：">{{ formatTime(new Date(), 'day') }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <comment-modal @chooseTemplate="handleChooseTemplate" ref="commentModal" />
  </div>
</template>

<script>
import CommentModal from './CommentModal'
import { getLevel } from '@/api/morality'
import { getSession, noMatchLevel } from '@/utils/util'

export default {
  components: {
    CommentModal
  },
  data() {
    return {
      form: {},
      from: this.$route.params.from || getSession('createEvaluationFrom'),
      row: this.$route.params.row || getSession('createEvaluationRow'),
      many: this.$route.params.many || getSession('createEvaluationMany'),

      rules: {
        committeeLevel: [{ required: true, message: '请选择自评等级', trigger: 'blur' }],
        committeeScore: [{ required: true, message: '请输入自评分数', trigger: 'blur' }],
        committeeComment: [{ required: true, message: '请输入评价内容', trigger: 'blur' }]
      },
      mdl: {},
      levelArr: [],
      saveLevel: []
    }
  },
  computed: {
    score() {
      return this.form.committeeScore
    }
  },
  watch: {
    score(n, o) {
      if (n && n !== o) {
        this.levelArr = [...this.saveLevel]
        let arr = this.levelArr.filter(v => n >= v.minScore && n <= v.maxScore)
        let arr1 = []
        if (arr.length > 0) {
          arr1 = [...arr]
        } else {
          arr1 = noMatchLevel(this.saveLevel, n)
        }
        this.$nextTick(() => {
          this.levelArr = [...arr1]
          this.$set(this.form, 'committeeLevel', this.levelArr[0].moralityLevelId)
        })
      }
    }
  },
  mounted() {
    getLevel({ moralityPlanId: this.row.moralityPlanId }).then(res => {
      if (res.state === '000000') {
        this.levelArr = res.data
        this.saveLevel = [...res.data]
      }
    })
  },
  methods: {
    edit(obj) {
      this.form = Object.assign({}, obj)
    },

    // 父组件获取数据
    getData() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('postData', 5, this.form)
        } else {
          this.$emit('notSubmit', 5)
        }
      })
    },
    // 选择模板后传递过来的对象
    handleChooseTemplate(obj) {
      this.mdl = Object.assign({}, obj)
      this.$set(this.form, 'committeeComment', obj.commentContent)
    },
    handleGetTemplate() {
      this.$refs.commentModal.show(4)
    }
  }
}
</script>

